<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width, height=device-height" />

<!-- CSS -->
<link rel="stylesheet" type="text/css" href="css/sdsway2_style.css"/>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
function checkAvatar() {
	var avatarIdObj = document.getElementById("avatarId");
	var avatarId = avatarIdObj.value;
	if( avatarId==null || avatarId.length==0 ) {
		alert("아이디를 입력해주십시오.");
		avatarIdObj.focus();
		return false;
	}
	
	var avatarTypeObj = document.getElementsByName("avatarType");
	var checkedAvatarType = null;
	for(var i=0; i<avatarTypeObj.length; i++) {
		if( avatarTypeObj[i].checked ) {
			checkedAvatarType = avatarTypeObj[i].value;
			break;
		}
	}
	if( checkedAvatarType == null ) checkedAvatarType = 10;
	document.getElementById("checkedAvatarType").value = checkedAvatarType;

	var pwdObj = document.getElementById("remotepassword");
	var pwd = pwdObj.value;
	if (pwd == null || pwd.length == 0) {
		alert("인증코드를 입력해주십시오.");
		pwdObj.focus();
		return false;
	}

	return true;
}

function login() {
	if( checkAvatar() ) {
		$.ajax({
			type: "POST",
			url: "checkPwdAjax.json",
			dataType: "json",
			data: "remotepassword="+document.getElementById("remotepassword").value,
			async: false,
			success: function(data) {
				if( data == null ) return null;
				var resultMessage = data.resultMessage;
				if( resultMessage == "SUCC" ) document.getElementById("loginForm").submit();
				else if( resultMessage == "OVER" ) alert("접속 인원이 초과하여 접속할 수 없습니다.");
				else if( resultMessage == "FAIL" ) alert("인증코드가 잘못되어 접속할 수 없습니다.");
			},
			error: function(data, status, error) {
				alert("입장 실패\n\n문제가 발생하여 접속할 수 없습니다.\n이용에 불편을 드려 죄송합니다.\n\n[" + status + "] " + error);
			}
		});
	}
}
</script>
<title>아바타 로그인</title>
</head>
<body>
<form id="loginForm" action="login.do" method="post">
	<input type="hidden" id="checkedAvatarType" name="checkedAvatarType" />
	<table summary="loginTable" class="defaultTable">
		<caption style="display:none;">LOGIN</caption>
		<colgroup>
			<col width="25%" />
			<col width="25%" />
			<col width="25%" />
			<col width="25%" />
		</colgroup>
		<tbody>
			<tr>
				<th colspan="4" style="padding-left:10px; text-align:left;">닉네임 입력</th>
			</tr>
			<tr>
				<td colspan="4"><input type="text" id="avatarId" name="avatarId" class="mobileInputText" value="" maxlength="3" placeholder="닉네임을 입력하세요." /></td>
			</tr>
<%//LINE %><tr><td colspan="4" class="skyTopLineTd" style="height:5px;" /></tr>
			<tr>
				<th colspan="4" style="padding-left:10px; text-align:left;">아바타 선택</th>
			</tr>
			<tr>
				<td>
					<input type="radio" id="avatarType10" name="avatarType" value="10">
					<label for="avatarType10"><img src="img/cat1.png" style="width:30px;height:30px;"></label>
				</td>
				<td>
					<input type="radio" id="avatarType20" name="avatarType" value="20">
					<label for="avatarType20"><img src="img/chicken1.png" style="width:30px;height:30px;"></label>
				</td>
				
				<td>
					<input type="radio" id="avatarType30" name="avatarType" value="30">
					<label for="avatarType30"><img src="img/dog1.png" style="width:30px;height:30px;"></label>
				</td>
				<td>
					<input type="radio" id="avatarType40" name="avatarType" value="40">
					<label for="avatarType40"><img src="img/monkey1.png" style="width:30px;height:30px;"></label>
				</td>
			</tr>
			<tr>
				<td>
					<input type="radio" id="avatarType50" name="avatarType" value="50">
					<label for="avatarType50"><img src="img/mouse1.png" style="width:30px;height:30px;"></label>
				</td>
				<td>
					<input type="radio" id="avatarType60" name="avatarType" value="60">
					<label for="avatarType60"><img src="img/pig1.png" style="width:30px;height:30px;"></label>
				</td>
				<td>
					<input type="radio" id="avatarType70" name="avatarType" value="70">
					<label for="avatarType70"><img src="img/rabbit1.png" style="width:30px;height:30px;"></label>
				</td>
				<td>
					<input type="radio" id="avatarType80" name="avatarType" value="80">
					<label for="avatarType80"><img src="img/bomb.gif" style="width:30px;height:30px;"></label>
				</td>
			</tr>
			<tr>
				<td>
					<input type="radio" id="avatarType90" name="avatarType" value="90">
					<label for="avatarType90"><img src="img/avatar1.gif" style="width:30px;height:30px;"></label>
				</td>
				<td>
					<input type="radio" id="avatarType110" name="avatarType" value="110">
					<label for="avatarType110"><img src="img/omnom1.png" style="width:30px;height:30px;"></label>
				</td>
				<td>
				</td>
				<td>
				</td>
			</tr>
<%//LINE %><tr><td colspan="4" class="skyTopLineTd" style="height:5px;" /></tr>
			<tr>
				<th colspan="4" style="padding-left:10px; text-align:left;">인증코드 입력</th>
			</tr>
			<tr>
				<td colspan="4"><input type="text" id="remotepassword" name="remotepassword" class="mobileInputText" placeholder="인증코드를 입력하세요." /></td>
			</tr>
<%//LINE %><tr><td colspan="4" class="skyTopLineTd" style="height:5px;" /></tr>
			<tr>
				<td colspan="4"><input type="button" class="mobileInputButton" value="입장" onclick="login();" /></td>
			</tr>
		</tbody>
	</table>
</form>
</body>
</html>